<template>
  <view class="shop_list_box">
    <uni-section title="全部店铺" type="line"> </uni-section>

    <view class="ul" style="margin-top: 20rpx">
      <view
        v-for="(item, index) in shop.list"
        :key="index"
        class="li"
        @click="shopHandle(item)"
      >
        <view class="image_box">
          <image
            :src="'http://upyun-cdn.hyunst.com/' + item.merchantLogo"
            mode=""
          ></image>
        </view>

        <view class="des_box">
          <view class="shop_name">
            <text
              style="font-weight: bold; color: #000; margin-bottom: 10rpx"
              >{{ item.merchantName }}</text
            >
          </view>
          <view class="txt" style="margin-top: 0">
            <uni-icons type="star-filled" size="20" color="#fcbd2a"></uni-icons>
            <text style="margin: 0 10rpx; color: #fcbd2a">5</text>
            <text>月售2170</text>
          </view>

          <view class="txt">
            <text>起送 10元</text>
            <text>配送 1元</text>
          </view>

          <view class="txt">
            <uni-icons type="location" size="20"></uni-icons>
            <text>福建省泉州市鲤城区经贸学院</text>
          </view>
        </view>

        <view class="state">
          <image
            src="../../../static/image/home/Snipaste_2023-03-21_18-03-26.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { homeService, merchantService } from '@/api/index'
import myIcon from '@/components/icon/src/font/my-icon.vue'

import type { ShopList } from '@/type/home/shopList'
console.log(123)

onMounted(() => {
  getShopList()
})

const shopHandle = (item: ShopList) => {
  console.log(item)

  merchantService.getMerchantMenuList(item.id + '')
  uni.navigateTo({
    url: `/pages/shopdetail/index?id=${item.id}`,
  })
}

const shop = reactive({
  list: [] as Array<ShopList>,
})

const getShopList = async () => {
  const res = await homeService.getShopList()
  console.log(res.data.list)
  shop.list = res.data.list
}
</script>

<style lang="scss" scoped>
.shop_list_box {
  width: 100%;
}

.ul {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background-color: #f3f4f6;
  margin-top: 30rpx;

  .li {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #fff;
    margin-bottom: 25rpx;
    border-radius: 20rpx;

    box-sizing: border-box;
    padding: 20rpx 20rpx;

    position: relative;
    box-shadow: 0px 0px 7px 2px rgba(168, 165, 165, 0.1);

    .image_box {
      width: 185rpx;
      height: 185rpx;
      background-color: antiquewhite;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }

    .des_box {
      box-sizing: border-box;
      padding: 0 20rpx;

      > view {
        display: flex;
        align-items: center;
        color: #76767a;

        .shop_name {
          margin-bottom: 0rpx;
        }
      }

      .txt {
        font-size: 0.7rem;
        margin-top: 15rpx;
      }
    }

    .state {
      position: absolute;
      top: 0;
      right: 0;

      image {
        width: 120rpx;
        height: 100rpx;
      }
    }
  }
}
</style>
